<template>
  <div class="container">
    <div class="list_1">
      <span class="title">排行榜</span>
      <div class="list">
        <div class="item" @click="playSoar(0)">
          <div class="cover" style="background-color: #f77462">
            <span>飙升榜</span>
          </div>
          <div class="info">
            <span>飙升榜</span>
            <span
              @click.stop="playSoar(index)"
              class="music"
              v-for="(item, index) in soarList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
        <div class="item" @click="playTop(0)">
          <div class="cover" style="background-color: #cc49d2">
            <span>Top100</span>
          </div>
          <div class="info">
            <span>Top100</span>
            <span
              @click.stop="playTop(index)"
              class="music"
              v-for="(item, index) in topList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
        <div class="item" @click="playHot(0)">
          <div class="cover" style="background-color: #89cb74">
            <span>热播榜</span>
          </div>
          <div class="info">
            <span>热播榜</span>
            <span
              @click.stop="playHot(index)"
              class="music"
              @click="playHot(index)"
              v-for="(item, index) in hotList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
        <div class="item" @click="playDownload(0)">
          <div class="cover" style="background-color: #7c50de">
            <span>下载榜</span>
          </div>
          <div class="info">
            <span>下载榜</span>
            <span
              @click.stop="playDownload(index)"
              class="music"
              v-for="(item, index) in downloadList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
        <div class="item" @click="playNew(0)">
          <div class="cover" style="background-color: #3abeb1">
            <span>新歌榜</span>
          </div>
          <div class="info">
            <span>新歌榜</span>
            <span
              @click.stop="playDownload(index)"
              class="music"
              v-for="(item, index) in newList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
        <div class="item" @click="playUser(0)">
          <div class="cover" style="background-color: #727eee">
            <span>用户榜</span>
          </div>
          <div class="info">
            <span>用户榜</span>
            <span
              @click.stop="playUser(index)"
              class="music"
              v-for="(item, index) in userList.slice(0, 3)"
              :key="index"
            >
              {{ index + 1 + "." + item.title + "-" + item.user?.nickname }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="list_2">
      <span class="title">新歌榜</span>
      <div class="list">
        <div class="item" v-for="(item, index) in newRank" :key="index">
          <div class="cover" @click="changeNewRank(item)">
            <el-image
              style="width: 160px; height: 160px; border-radius: 10px"
              :src="baseUrl + item.image"
            />
            <div class="mask">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list_2">
      <span class="title">特色榜</span>
      <div class="list">
        <div class="item" v-for="(item, index) in featureRank" :key="index">
          <div class="cover" @click="changeFeatureRank(item)">
            <el-image
              style="width: 160px; height: 160px; border-radius: 10px"
              :src="baseUrl + item.image"
            />
            <div class="mask">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  indexRank,
  newMusicRank,
  newMusicRankInfo,
  indexFeatureRank,
  indexFeatureRankInfo,
} from "@/http/api";
import { PersistentStore } from "@/stores";
const router = useRouter();
const persistentStore = PersistentStore();
const baseUrl = import.meta.env.VITE_API_URL;

const downloadList = ref([]);
const hotList = ref([]);
const newList = ref([]);
const soarList = ref([]);
const topList = ref([]);
const userList = ref([]);

const newRank = ref([]);
const featureRank = ref([]);

onMounted(() => {
  getRank();
  getNewMusicRank();
  getFeatureRank();
});

const getNewMusicRank = async () => {
  const { data } = await newMusicRank();
  newRank.value = data;
};

const changeNewRank = async (e) => {
  const { data } = await newMusicRankInfo({
    id: e.id,
  });
  const url = router.resolve("/play_music");
  const arr = { index: 0, list: JSON.stringify(data) };
  persistentStore.setSongList(JSON.stringify(data));
  window.open(url.href, url.href).postMessage(arr);
};

const getFeatureRank = async () => {
  const { data } = await indexFeatureRank();
  featureRank.value = data;
};

const changeFeatureRank = async (e) => {
  const { data } = await indexFeatureRankInfo({
    id: e.id,
  });
  const url = router.resolve("/play_music");
  const arr = { index: 0, list: JSON.stringify(data) };
  persistentStore.setSongList(JSON.stringify(data));
  window.open(url.href, url.href).postMessage(arr);
};

const getRank = async () => {
  const { data } = await indexRank();
  downloadList.value = data.download;
  hotList.value = data.hot;
  newList.value = data.new;
  soarList.value = data.soar;
  topList.value = data.top;
  userList.value = data.user;
};

const playDownload = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: downloadList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const playHot = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: hotList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const playNew = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: newList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const playSoar = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: soarList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const playTop = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: topList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const playUser = (e) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: e, list: userList.value };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
